<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 你好 -->
        <p>{{ msg }}</p>

        <!-- 10 -->
        <p>{{ 10 }}</p>
        <!-- 显示 msg -->
        <p>{{ 'msg' }}</p>
        <!-- 显示 40 -->
        <p>{{ 10 + 30 }}</p>

        <!-- 你好，周彦祖 -->
        <p>{{ msg + '，周彦祖' }}</p>

        <!-- 成年 -->
        <p>{{ age >= 18 ? '成年' : '未成年' }}</p>

        <!-- 直接msg -->
        <p>msg</p>
        <p>{{msg}}</p>
        <!-- 嘿嘿--你好 -->
        <p>嘿嘿--{{msg}}</p>

        <!-- 下面这句话实际运行会报错，因为插值语法里不能写语句 -->
        <!-- <p>{{ if (age >= 18) '成年' }}</p> -->

        <!-- 只要是被vue管理了，那么{{}}都代表插值语法用来输出某个数据 -->
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '你好',
                age: 19
            }
        })
    </script>
</body>
</html>